<template>
    <view class="person-info-page flex-col">
        <div class="step-icon">
            <img class="step-img" src="https://hxs.dsjhs.com:553/prod-api/profile//step-3.png" width="358px"
                height="21px" alt="" srcset="">
        </div>
        <view class="box_2 flex-row justify-between">
            <image class="label_1" referrerpolicy="no-referrer"
                src="https://hxs.dsjhs.com:553/prod-api/profile/emoji.png" />
            <text class="text_2">标记你的热爱！</text>
        </view>
        <text class="text_3">选择3-5个标签，可以为您推荐更精准的搭子和活动~</text>

        <!-- 标签列表组件 -->
        <TagList :key="tagListKey" :initialSelectedLabels="selectedLabels" :tagData="tagCategories" :loading="tagLoading"
            @selected-labels-change="handleSelectedLabelsChange" />


    </view>
</template>
<script>
import TagList from '@/components/tagList/index.vue'
import { getTagList } from '@/common/api_meethuangshi.js'

export default {
    components: {
        TagList
    },
    data() {
        return {
            constants: {},
            selectedLabels: [], // 已选择的标签
            tagListKey: 0, // 用于强制TagList组件重新渲染
            tagCategories: [], // 标签数据
            tagLoading: false, // 标签数据加载状态
            tagError: null // 标签数据加载错误
        };
    },
    props: {
        step: {
            type: Number,
            default: 3
        }
    },
    created() {
        this.fetchTagCategories();
    },
    methods: {
        // 处理来自TagList组件的选中标签变化
        handleSelectedLabelsChange(selectedLabels) {
            this.selectedLabels = selectedLabels
            console.log('父组件接收到选中标签变化:', this.selectedLabels)
        },
        handleNext() {
            // 第3步完成，触发完成事件
            this.$emit('update:step', 'completed');
        },
        // 获取标签数据
        async fetchTagCategories(id = '') {
            this.tagLoading = true;
            this.tagError = null;
            try {
                const res = await getTagList({
                    fatherId: id
                });
                console.log('获取标签数据:', res);
                if (res.code === 200 && res.data) {
                    // 确保数据是数组格式并过滤无效数据
                    const rawData = Array.isArray(res.data) ? res.data : [];
                    this.tagCategories = this.filterValidCategories(rawData);
                    console.log('过滤后的标签数据:', this.tagCategories);
                } else {
                    this.tagCategories = []; // 确保失败时也设置为空数组
                    this.tagError = res.message || '标签加载失败';
                    uni.showToast({
                        title: res.message || '标签加载失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('获取标签列表失败:', error);
                this.tagCategories = []; // 确保异常时也设置为空数组
                this.tagError = '标签加载失败';
                uni.showToast({
                    title: '标签加载失败',
                    icon: 'none'
                });
            } finally {
                this.tagLoading = false;
            }
        },
        // 过滤有效的分类数据
        filterValidCategories(categories) {
            if (!Array.isArray(categories)) {
                return [];
            }
            return categories.filter(category => {
                if (!category || typeof category !== 'object') {
                    return false;
                }
                // 确保分类有基本信息
                if (!category.tagName || typeof category.tagName !== 'string') {
                    return false;
                }
                // 如果有子标签，过滤子标签
                if (category.sonTagObj) {
                    category.sonTagObj = this.getValidTags(category.sonTagObj);
                }
                return true;
            });
        },
        // 过滤有效的标签数据
        getValidTags(sonTagObj) {
            if (!Array.isArray(sonTagObj)) {
                return [];
            }
            return sonTagObj.filter(tag => {
                return tag &&
                    typeof tag === 'object' &&
                    tag.tagName &&
                    typeof tag.tagName === 'string' &&
                    tag.tagName.trim() !== '';
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.person-info-page {
    background-color: rgba(247, 246, 255, 1);
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    padding: 16px 16px 100px 16px;
    box-sizing: border-box;

    .step-icon {

        .step-img {
            width: 358px;
            height: 21px;
        }

    }

    .box_1 {
        margin: 0 33px 0 27px;

        .text_1 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 17px;
            font-family: SFPro-Semibold;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
            line-height: 22px;
        }

        .thumbnail_1 {
            width: 19px;
            height: 12px;
            margin: 5px 0 5px 182px;
        }

        .thumbnail_2 {
            width: 17px;
            height: 12px;
            margin: 5px 0 5px 8px;
        }

        .image_1 {
            width: 27px;
            height: 13px;
            margin: 5px 0 4px 7px;
        }
    }

    .image_2 {
        width: 100%;
        height: 20px;
        margin: 0 0 0 0;
    }

    .box_2 {
        width: 166px;
        margin: 30px 0 0 0;

        .label_1 {
            width: 32px;
            height: 27px;
        }

        .text_2 {
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 18px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 24px;
            margin-top: 2px;
        }
    }

    .text_3 {
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 20px;
        margin: 8px 47px 0 0;
    }



    .box_13 {
        width: 358px;
        margin: 52px 16px 0 0;

        .image-wrapper_1 {
            background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng60615fba7e480cf518da389eebfa14049561f85d3496517d9d1965b41b0a4ac0) 100% no-repeat;
            background-size: 100% 100%;
            padding: 12px 21px 12px 21px;

            .label_5 {
                width: 24px;
                height: 24px;
            }
        }

        .text-wrapper_18 {
            background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng40d701767fd17a942668ae5d75618ebd51018b143cb05d6ffe5c4be28688f86e) 100% no-repeat;
            background-size: 100% 100%;
            padding: 13px 115px 13px 115px;

            .text_21 {
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                text-align: right;
                white-space: nowrap;
                line-height: 22px;
            }
        }
    }
}
</style>